<template>
  <a-layout style="height: 100vh">
    <a-layout-header>
      <a-row id="globalHeader" align="center">
        <!-- 顶部信息展示 -->
        <a-col flex="auto">
          <a-menu mode="horizontal">
            <!-- 标题 -->
            <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
              <div class="title-bar">
                <img class="logo" src="../assets/logo.png" alt="logo">
                <div class="title">智能刷题学习平台</div>
              </div>
            </a-menu-item>
          </a-menu>
        </a-col>
        <!-- 顶部右侧登录按钮 -->
        <a-col flex="200px">
          <div v-if="loginUserStore.loginUser.id > 0">
            <a-popover position="bottom">
              <!-- 悬停触发区域 -->
              <template #content>
                <div>
                  <a-button
                      type="text"
                      @click="goToHome"
                      style="padding: 0 8px"
                  >
                    回到主页
                  </a-button>
                </div>
                <div>
                  <a-button
                      type="text"
                      status="danger"
                      @click="clickLogout"
                      style="padding: 0 8px"
                  >
                    退出登录
                  </a-button>
                </div>

              </template>

              <UserAvatar
                  :user-id="loginUserStore.loginUser.id"
                  :avatar-size="32"
                  :font-size="10"
              />
            </a-popover>
          </div>
          <div v-else>
            <RouterLink to="/user/login">
              <a-button type="primary">登录</a-button>
            </RouterLink>
          </div>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout>
      <a-layout-sider :collapsed="isCollapse">
        <a-menu
            :style="{ width: '200px', height: '100%' }"
            :default-open-keys="['0']"
            :default-selected-keys="selectedKeys.value"
            show-collapse-button
            breakpoint="xl"
            @collapse="onCollapse"
            @menu-item-click="doMenuClick"
        >
          <a-sub-menu key="post">
            <template #icon>
              <icon-exclamation-circle />
            </template>
            <template #title>帖子管理</template>
            <a-menu-item key="/admin/post">帖子管理</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="bank">
            <template #icon>
              <icon-bulb></icon-bulb>
            </template>
            <template #title>题库管理</template>
            <a-menu-item key="/admin/bankInfo">题库信息管理</a-menu-item>
            <a-menu-item key="/admin/bankQuestion">题库内容管理</a-menu-item>
            <a-menu-item key="/admin/answer">用户作答记录</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="user">
            <template #icon>
              <icon-user></icon-user>
            </template>
            <template #title>用户管理</template>
            <a-menu-item key="/admin/userInfo">用户信息管理</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content>
        <RouterView></RouterView>
      </a-layout-content>
    </a-layout>
    <a-layout-footer>
      <a-layout-footer class="footer">
        <a href="https://www.code-nav.cn" target="_blank">
          智能刷题学习平台 by 爱编程的石头
        </a>
      </a-layout-footer>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useLoginUserStore} from "@/store/userStore";
import {useRouter} from "vue-router";
import {userLogoutUsingPost} from "@/api/UserRequest";
import {
  IconUser,
  IconExclamationCircle,
  IconBulb,
} from '@arco-design/web-vue/es/icon';
import message from "@arco-design/web-vue/es/message";
import UserAvatar from "@/components/UserAvatar.vue";

const router = useRouter();
const loginUserStore = useLoginUserStore();
const isCollapse = ref(false);
// 当前选中的菜单项
const selectedKeys = ref(["/"]);

let userLoginStore = useLoginUserStore();
// 路由跳转时，自动更新选中的菜单项
router.afterEach((to) => {
  selectedKeys.value = [to.path];
});

// 点击菜单后更改路由
const doMenuClick = (key) => {
  router.push({
    path: key,
  });
};

// 退出登录
const clickLogout = async () => {
  await userLogoutUsingPost();
  loginUserStore.clearLoginUser();
  await router.push("/user/login");
}

function onCollapse() {
  isCollapse.value = !isCollapse.value;
}

function goToHome() {
  router.push("/home")
}

onMounted(() => {
  if (userLoginStore.loginUser.userRole !== 'admin'){
    message.warning("当前用户没有权限！")
    router.push("/home");
  }
})
</script>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
}

.username-hover {
  cursor: pointer;
  transition: all 0.3s;
  padding: 4px 8px;
  border-radius: 4px;
}

.title {
  color: black;
  margin-left: 16px;
}

.logo {
  height: 48px;
}

.footer {
  padding: 16px;
  text-align: center;
  background: #efefef;
}

.menu-demo {
  box-sizing: border-box;
  width: 100%;
  height: 600px;
  padding: 40px;
  background-color: var(--color-neutral-2);
}
</style>